<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>订单详情</title>
		<script src="js/vue.min.js"></script>
		<script src="js/barcode.all.min.js"></script>
		<script src="js/moment.min.js"></script>
		<style>
			@page {
				margin: 0px;
			}

			#detail {
				display: flex;
				flex-direction: column;
				font-size: 16px;
			}

			.info-group {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 20px;
			}

			.info-title {
				width: 60%;
				padding-left: 20px;
				line-height: 2em;
				border: 1px solid black;
				border-bottom: 0px;
			}

			.table-left {
				width: 200px;
				text-align: right;
				padding-right: 10px;
			}

			.table-right {
				padding-left: 10px;
			}

			table {
				width: 60%;
				border-collapse: collapse;
				box-sizing: border-box;
			}

			th,
			td {
				border: 1px solid black;
				line-height: 2em;
			}

			div {
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<div id="detail">
			<div v-if="currentOrder.state!=0" class="info-group">
				<svg id="barcode"></svg>
			</div>
			<div v-if="currentOrder.state==0" class="info-group">
				<h1 style="color:red">此订单已经作废</h1>
			</div>
			<div class="info-group">
				<div class="info-title">用户信息</div>
				<table>
					<tr>
						<th class="table-left">购买者姓名</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.buyerName
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.userName">
						<th class="table-left">姓名</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.userName
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.sex">
						<th class="table-left">性别</th>
						<td class="table-right">
							{{ currentOrder.user ? currentOrder.user.sex : '' }}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.phone1">
						<th class="table-left">联系电话1</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.phone1
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.phone2">
						<th class="table-left">联系电话2</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.phone2
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.birthday">
						<th class="table-left">生辰</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.birthdayString
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.deathday">
						<th class="table-left">亡辰</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.deathdayString
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.address">
						<th class="table-left">常用地址</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.address
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.user&&currentOrder.user.remarks">
						<th class="table-left">用户备注</th>
						<td class="table-right">
							{{
								currentOrder.user
									? currentOrder.user.remarks
									: ''
							}}
						</td>
					</tr>
				</table>
			</div>
			<div class="info-group">
				<div class="info-title">商品信息</div>
				<table>
					<tr>
						<th class="table-left">商品编号</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.no
									: ''
							}}
						</td>
					</tr>
					<tr>
						<th class="table-left">商品名称</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.title
									: ''
							}}
						</td>
					</tr>
					<tr>
						<th class="table-left">价格</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.price
									: ''
							}}元
						</td>
					</tr>
					<tr>
						<th class="table-left">使用年限</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.durationString
									: ''
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.product&&currentOrder.product.sku">
						<th class="table-left">规格</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.sku
									: ''
							}}
						</td>
					</tr>
					<tr
						v-if="currentOrder.product&&currentOrder.product.description"
					>
						<th class="table-left">描述</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.description
									: ''
							}}
						</td>
					</tr>
					<tr
						v-if="currentOrder.product&&currentOrder.product.remarks"
					>
						<th class="table-left">商品备注</th>
						<td class="table-right">
							{{
								currentOrder.product
									? currentOrder.product.remarks
									: ''
							}}
						</td>
					</tr>
				</table>
			</div>
			<div class="info-group">
				<div class="info-title">订单信息</div>
				<table>
					<tr>
						<th class="table-left">订单编号</th>
						<td class="table-right">{{ currentOrder.id }}</td>
					</tr>
					<tr>
						<th class="table-left">状态</th>
						<td class="table-right">
							{{ currentOrder.stateString }}
						</td>
					</tr>
					<tr v-if="currentOrder.payType">
						<th class="table-left">支付方式</th>
						<td class="table-right">
							{{ currentOrder.payType }}
						</td>
					</tr>
					<tr>
						<th class="table-left">创建时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.createDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr>
						<th class="table-left">更新时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.updateDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.payDate">
						<th class="table-left">支付时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.payDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.startDate">
						<th class="table-left">开始时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.startDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.outDate">
						<th class="table-left">到期时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.outDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.invalidDate">
						<th class="table-left">作废时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.invalidDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.finishDate">
						<th class="table-left">完成时间</th>
						<td class="table-right">
							{{
								moment(currentOrder.finishDate).format(
									'YYYY-MM-DD HH:mm:ss'
								)
							}}
						</td>
					</tr>
					<tr v-if="currentOrder.remarks">
						<th class="table-left">订单备注</th>
						<td class="table-right">{{ currentOrder.remarks }}</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script>
		const { ipcRenderer } = require('electron');
		new Vue({
			el: '#detail',
			data: {
				currentOrder: {},
				moment
			},
			mounted() {
				ipcRenderer.on('ping', (e, data) => {
					this.currentOrder = data;
					JsBarcode('#barcode', this.currentOrder.id);
					ipcRenderer.sendToHost('pong');
				});
			}
		});
	</script>
</html>
